<template>
  <lay-layer v-model="layerRef.open"
             :title="layerRef.title"
             :area="layerRef.area"
             :shade-close="layerRef.shadeClose"
             :maxmin="layerRef.maxmin">

    <div style="padding: 20px">
      <lay-form :model="userInfo"
                ref="layUserInfoForm"
                :label-position="'right'"
                isLabelTooltip
                labelWidth="130px" style="margin: 20px">
        <lay-form-item label="昵称" prop="nickName" mode="inline" :required="layerRef.required">
          <lay-input v-model="userInfo.nickName" :disabled="layerRef.disabled"></lay-input>
        </lay-form-item>

        <lay-form-item label="性别" prop="sex" :required="layerRef.required" mode="inline">
          <lay-radio v-model="userInfo.sex" name="sex" value="1" label="男" :disabled="layerRef.disabled"></lay-radio>
          <lay-radio v-model="userInfo.sex" name="sex" value="2" label="女" :disabled="layerRef.disabled"></lay-radio>
          <lay-radio v-model="userInfo.sex" name="sex" value="3" label="未知" :disabled="layerRef.disabled"></lay-radio>
        </lay-form-item>

        <lay-form-item label="电话号码" prop="telephone" mode="inline" :required="layerRef.required">
          <lay-input v-model="userInfo.telephone" maxlength="11" :disabled="layerRef.disabled"></lay-input>
        </lay-form-item>

        <lay-form-item label="身份证号码" prop="idCard" mode="inline">
          <lay-input v-model="userInfo.idCard" maxlength="18" :disabled="layerRef.disabled"></lay-input>
        </lay-form-item>

        <!--        <lay-form-item label="头像" prop="avatar" mode="inline">-->
        <!--          <lay-input v-model="userInfo.avatar" :disabled="layerRef.disabled"></lay-input>-->
        <!--        </lay-form-item>-->

        <lay-form-item label="电子邮箱" prop="eMailBox" mode="inline">
          <lay-input v-model="userInfo.eMailBox" :disabled="layerRef.disabled"></lay-input>
        </lay-form-item>

        <!--        <lay-form-item label="用户类型" prop="userType" mode="inline">-->
        <!--          <lay-input v-model="userInfo.userType" :disabled="layerRef.disabled"></lay-input>-->
        <!--        </lay-form-item>-->

        <!--        <lay-form-item label="有效标志" prop="validFlag" mode="inline" :required="layerRef.required">-->
        <!--          <lay-radio v-model="userInfo.validFlag" name="validFlag" value="Y" label="有效"-->
        <!--                     :disabled="layerRef.disabled"></lay-radio>-->
        <!--          <lay-radio v-model="userInfo.validFlag" name="validFlag" value="N" label="无效"-->
        <!--                     :disabled="layerRef.disabled"></lay-radio>-->
        <!--        </lay-form-item>-->

        <lay-form-item label="备注" prop="remarks">
          <lay-textarea v-model="userInfo.remarks" maxlength="30" :disabled="layerRef.disabled"></lay-textarea>
        </lay-form-item>

      </lay-form>

    </div>


    <template v-slot:footer>
      <div class="fly-form-footer">
        <lay-button v-if="layerRef.submit" class="fly-button fly-ok-button " @click="saveUserInfoHandler">
          <lay-icon class="layui-icon-ok"></lay-icon>
          保存
        </lay-button>
        <lay-button class="fly-button fly-close-button" @click="onTapClose">
          <lay-icon class="layui-icon-close"></lay-icon>
          关闭
        </lay-button>
      </div>
    </template>


  </lay-layer>
</template>


<script setup lang="ts" name="refUserInfo">
import {reactive, ref} from "vue";
import {FormTypeEnum} from "@/fly/biz/BizModel";
import {UserInfo} from "@/api/admin/model/UserInfoModel";
import useTenantInfoComposable from "@/composables/admin/UserInfoComposable";

const {
  userInfo,
  userInfoDataHandler
} = useTenantInfoComposable();

const layUserInfoForm = ref<any>();

/* 弹窗 */
const layerRef = reactive<any>({
  open: false,
  title: '基础用户信息',
  area: ['900px', '460px'], // 宽度,  高度
  disabled: false,
  shadeClose: false,
  maxmin: false,
  submit: true,
})


/**
 * 提交
 */
function saveUserInfoHandler() {
  layUserInfoForm.value.validate((isValidate: boolean, model: UserInfo, errors: any[]) => {
    if (!isValidate) {
      return;
    }
    userInfoDataHandler(model);
  });
}


//显示弹框
const open = (type: FormTypeEnum, row?: UserInfo) => {
  layerRef.title = type + '用户';
  if (null !== row) {
    userInfo.value = JSON.parse(JSON.stringify(row))
  } else {
    userInfo.value = {
      id: '',  // 用户id唯一标识
      nickName: '',  // 昵称
      idCard: '',  // 身份证号码
      sex: '1',  // 性别
      telephone: '',  // 电话号码
      avatar: '',  // 头像
      eMailBox: '',  // 电子邮箱
      userType: 'IN',  // 用户类型
      validFlag: 'Y',  // 有效标志: Y-是;N-否; 与 ta_fly_login_info 表保持一致
      remarks: '',  // 备注
    }
  }

  layerRef.disabled = false;
  layerRef.submit = true;
  layerRef.required = true;
  if (FormTypeEnum.VIEW === type) {
    layerRef.disabled = true;
    layerRef.submit = false;
    layerRef.required = false;
  }

  layerRef.open = true;
};


/**
 * 关闭按钮
 */
const onTapClose = () => {
  layerRef.open = false;
}


//在组件中，属性和方法，只能对当前template,
//外部需要使用的时候，需要使用 defineExpose 暴露出去给父组件
defineExpose({
  open,
  onTapClose
});

</script>


<style scoped>

</style>